<template>
  <div>
    <div class="setting" :class="isShow?'show':''">
      <SettingComponent @showMe="showMe"/>
    </div>
    <div class="mine">
      <section class="mine-header">
        <section class="first">
          <div class="img" @click.stop="showMe">
            <img src="@/../public/images/1668587314132.png" alt="" />
          </div>
        </section>
        <section class="sec">
          <!-- 头像 -->
          <div class="sec-left" @click="$toast('正在开发ing...')">
            <img src="@/../public/images/1668587314171.png" alt="" />
          </div>
          <div class="sec-right">
            <div class="sr-f">
              <div>{{ user.name }}</div>
              <!-- 编辑名字 -->
              <div class="img" @click="$toast('正在开发ing...')">
                <img src="@/../public/images/1668587602000.png" alt="" />
              </div>
            </div>
            <div class="sr-des">用一句话介绍自己…</div>
          </div>
        </section>
        <section class="three">
          <div class="three-item" @click="$router.push('/resumelist')">
            <div class="img">
              <div>
                <img src="@/../public/images/1668587314127.png" alt="" />
              </div>
            </div>
            <div class="title">附件简历</div>
          </div>
          <div class="three-item" @click="$toast('正在开发ing...')">
            <div class="img">
              <div>
                <img src="@/../public/images/1668587314141.png" alt="" />
              </div>
            </div>
            <div class="title">已投简历</div>
          </div>
          <div class="three-item" @click.stop="$router.push('/collect')">
            <div class="img">
              <div>
                <img src="@/../public/images/1668587314136.png" alt="" />
              </div>
            </div>
            <div class="title">我的收藏</div>
          </div>
        </section>
      </section>
      <section class="mine-content">
        <div class="content-item" @click="$toast('正在开发ing...')">
          <div class="img-fir">
            <img src="@/../public/images/1668587314129.png" alt="" />
          </div>
          <div class="title">管理求职意向</div>
          <div class="text">在职-考虑机会</div>
          <div class="img-sec">
            <img src="@/../public/images/1668390326704.png" alt="" />
          </div>
        </div>
        <div class="line"></div>
        <div class="content-item" @click.stop="$router.push('/resume')">
          <div class="img-fir">
            <img src="@/../public/images/1668587314154.png" alt="" />
          </div>
          <div class="title">个人主页</div>
          <div class="text"></div>
          <div class="img-sec">
            <img src="@/../public/images/1668390326704.png" alt="" />
          </div>
        </div>
        <div class="content-item" @click="$toast('正在开发ing...')">
          <div class="img-fir">
            <img src="@/../public/images/1668587314126.png" alt="" />
          </div>
          <div class="title">关注公司</div>
          <div class="text"></div>
          <div class="img-sec">
            <img src="@/../public/images/1668390326704.png" alt="" />
          </div>
        </div>
        <div class="content-item" @click="$toast('正在开发ing...')">
          <div class="img-fir">
            <img src="@/../public/images/1668587314147.png" alt="" />
          </div>
          <div class="title">常见问答</div>
          <div class="text"></div>
          <div class="img-sec">
            <img src="@/../public/images/1668390326704.png" alt="" />
          </div>
        </div>
        <div class="line"></div>
      </section>
    </div>
  </div>
</template>

<script>
import SettingComponent from "@/components/SettingComponent.vue";
import { mapState } from "vuex";
export default {
  name: "MineView",
  components: {
    SettingComponent,
  },
  data:()=>{
    return {
      isShow:false
    }
  },
  computed: {
    ...mapState(["user"]),
  },
  methods:{
    showMe(){
      this.isShow=!this.isShow;
    }
  }
};
</script>

<style lang="scss" scoped>
.show{
  left: 0 !important;
}
.setting{
  position: fixed;
  left: 100vw;
  top: 0;
  z-index: 1000;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  transition: 0.5s;
}
.mine {
  text-align: start;
  width: 100%;
  box-sizing: border-box;
  .mine-header {
    position: relative;
    height: 3.06rem;
    background-image: url(@/../public/images/1668587314162.png);
    background-size: cover;
    padding: 0.2rem 0.3rem;
    .first {
      height: 0.65rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .img {
        width: 0.38rem;
        height: 0.37rem;
      }
    }
    .sec {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sec-left {
        width: 1.4rem;
        height: 1.4rem;
      }
      .sec-right {
        flex-grow: 1;
        margin-left: 0.35rem;
        .sr-f {
          display: flex;
          font-size: 0.48rem;
          font-weight: bold;
          color: #ffffff;
          align-items: flex-end;
          .img {
            width: 0.28rem;
            height: 0.28rem;
            margin-bottom: 0.1rem;
            margin-left: 0.21rem;
          }
        }
        .sr-des {
          text-align: start;
          height: 0.26rem;
          width: 100%;
          overflow: hidden;
          margin-top: 0.15rem;
          font-size: 0.24rem;
          font-weight: 300;
          color: #ffffff;
        }
      }
    }
    .three {
      position: absolute;
      top: 2.65rem;
      left: 0.3rem;
      width: 6.9rem;
      height: 1.6rem;
      background: #ffffff;
      box-shadow: 0px 0.06rem 0.21rem 0px rgba(20, 150, 57, 0.22);
      border-radius: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .three-item {
        flex: 1;
        .img {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          > div {
            width: 0.45rem;
            height: 0.5rem;
          }
        }
        .title {
          margin-top: 0.2rem;
          width: 100%;
          text-align: center;
          font-size: 0.26rem;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
  .mine-content {
    margin-top: 1.3rem;
    padding: 0 0.3rem;
    .line {
      width: 100%;
      height: 0.01rem;
      background: #e5e5e5;
    }
    .content-item {
      width: 100%;
      box-sizing: border-box;
      padding-left: 0.1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.3rem;
      font-weight: 400;
      color: #333333;
      margin: 0.4rem 0;
      .img-fir {
        width: 0.32rem;
        height: 0.32rem;
      }
      .title {
        flex-grow: 1;
        overflow: hidden;
        margin-left: 0.3rem;
      }
      .text {
        font-size: 0.24rem;
        font-weight: 300;
        color: #999999;
        margin-right: 0.2rem;
      }
      .img-sec {
        width: 0.15rem;
        height: 0.28rem;
      }
    }
  }
}
</style>